<!-- src/views/HairRecolorPage.vue -->
<template>
  <app-page
    v-if="!isMobile"
    :title="title"
    :description="description"
    :operation_steps="operation_steps"
    :workflow-params="workflowParams"
    :workflow-id="workflowId"
    :placeholder-image="placeholderImage"
  />
  <app-page-mobile
    v-else
    :title="title"
    :description="description"
    :operation_steps="operation_steps"
    :workflow-params="workflowParams"
    :workflow-id="workflowId"
    :placeholder-image="placeholderImage"
  />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import AppPage from '../components/AppPage.vue'
import AppPageMobile from '../components/AppPageMobile.vue'
import api from '../api'

const title = '一键换发色'
const description = '使用AI技术，一键更换发色，让你的发型焕然一新'
const operation_steps = '1. 上传一张清晰的人像照片 2. 选择目标发色 3. 点击生成'
const workflowId = 'hair_recolor_workflow'
const placeholderImage = '/images/home/hairRecolor.png'

const workflowParams = ref({})
const isMobile = ref(false)

// 检测是否为移动设备
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 监听窗口大小变化
const handleResize = () => {
  checkMobile()
}

onMounted(() => {
  // 初始检测
  checkMobile()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

// 组件卸载时移除监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 加载工作流参数
const loadWorkflowParams = async () => {
  try {
    const response = await api.get('/cy/workflows/hair_recolor_workflow/params')
    if (response && typeof response === 'object' && 'code' in response && 'result' in response) {
      if (response.code === 0) {
        workflowParams.value = response.result
      } else {
        throw new Error(response.msg || '接口返回错误')
      }
    } else {
      throw new Error('Invalid response format')
    }
  } catch (error) {
    console.error('Error loading workflow parameters:', error)
    ElMessage.error('加载参数失败，请检查网络连接或联系管理员')
  }
}

onMounted(() => {
  loadWorkflowParams()
})
</script>

<style scoped>
/* 可以添加一些特定于页面的样式 */
</style>